<template>
  <transition>
    <div class="app-insurance-count">
    <div class="module">
      <div class="module-header">
        车险优惠试算
      </div>
      <div class="module-calculator">
        <div class="module-company">
          <div class="company-title">保险公司</div>
          <div class="company-body">
            <mt-radio
              title=""
              v-model="selectType"
              :options="optionsCustomer">
            </mt-radio>
          </div>
        </div>
        <div class="item-line">
          <span class="addon">商业险优惠</span>
          <div class="content">
            <span class="addon-discount">{{companyDiscount1}}</span> X
            <input class="input-discount" placeholder="" v-model="inputDiscount1"></input>
          </div>
        </div>
        <div class="item-line">
          <span class="addon">交强险优惠</span>
          <div class="content">
            <span class="addon-discount">{{companyDiscount2}}</span> X
            <input class="input-discount" placeholder="" v-model="inputDiscount2"></input>
          </div>
        </div>
      </div>
      <div class="discount-num">共优惠<span class="line">{{getNum}}</span>元</div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,Field,Button,Toast,Checklist,MessageBox} from 'mint-ui';
export default {
  data () {
    return {
      companyDiscount1:'35%',
      companyDiscount2:'10%',
      selectType:'0',
      inputDiscount1:'',
      inputDiscount2:'',
      optionsCustomer:[
        {
          label: '中国人保',
          value: '0'
        },
        {
          label: '平安保险',
          value: '1'
        },
        {
          label: '鼎和财险',
          value: '2'
        },],
    }
  },
  computed:{
    getNum:function(){
        var sum = 0;
        const countFirst=this.inputDiscount1*(this.companyDiscount1.split('%')[0])/100;
        const countSecond=this.inputDiscount2*(this.companyDiscount2.split('%')[0])/100;
          sum=parseFloat((countFirst+countSecond).toFixed(2))
          return sum;
    },
  },
  watch:{
    'selectType'(val){
      if(val=='0'){
        this.companyDiscount1='35%'
        this.companyDiscount2='10%'
      }else if(val=='1'){
        this.companyDiscount1='32%'
        this.companyDiscount2='10%'
      }else if(val=='2'){
        this.companyDiscount1='33%'
        this.companyDiscount2='10%'
      }
    }
  },
  mounted(){},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-insurance-count{
    padding:16px;
  }
  .app-insurance-count .module{
    background: #fff;
    padding:0 0 24px;
    border-radius:5px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.01);
  }
  .app-insurance-count .module .module-header{
    background:#ef3b3c;
    padding:10px 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
    border-radius:5px 5px 0 0
  }
  .app-insurance-count .module-company{
    font-size: 15px;
  }
  .app-insurance-count .module-company .company-title{
    padding:12px 16px 0;
  }
  .app-insurance-count .module-company .mint-cell{
    width: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .app-insurance-count .module-calculator .item-line{
    padding:10px 24px 0;
    font-size: 15px;
  }
  .app-insurance-count .module-calculator .item-line .addon{
    display: inline-block;
    vertical-align: middle;
    width:30%;
  }
  .app-insurance-count .module-calculator .item-line .content{
    display: inline-block;
    vertical-align: middle;
    width:64%;
  }
  .addon-discount{
    display: inline-block;
    width: 30px;
    text-align: right;
    margin-right: 6px;
  }
  .input-discount{
    width:120px;
    margin-left: 6px;
    border-radius:3px;
    outline:none;
    font-size: 14px;
    padding:6px;
    border:1px solid #ddd;
  }
  .discount-num{
    padding:18px 52px 0;
    text-align: right;
    font-size: 15px;
  }
  .discount-num .line{
    display: inline-block;
    min-width:50px;
    padding:2px 4px;
    margin:0 12px;
    border-bottom:1px solid #ddd;
    color:#ef3b3c;
    text-align: center;
  }
</style>
